<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务清单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .todo-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 500px;
            padding: 30px;
            backdrop-filter: blur(10px);
        }

        .todo-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .todo-header h1 {
            color: #333;
            font-size: 28px;
            margin-bottom: 10px;
        }

        .todo-form {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
        }

        .todo-input {
            flex: 1;
            padding: 14px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .todo-input:focus {
            border-color: #667eea;
            outline: none;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
        }

        .add-btn {
            padding: 14px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .add-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .todo-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            color: #666;
            font-size: 14px;
        }

        .todo-list {
            list-style: none;
        }

        .todo-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 10px;
            transition: transform 0.2s;
            animation: fadeIn 0.3s ease;
        }

        .todo-item:hover {
            transform: translateX(5px);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .todo-item.completed .todo-text {
            text-decoration: line-through;
            color: #999;
        }

        .todo-checkbox {
            margin-right: 15px;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .todo-text {
            flex: 1;
            font-size: 16px;
            color: #333;
            word-break: break-word;
        }

        .delete-btn {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 12px;
            transition: background 0.3s;
        }

        .delete-btn:hover {
            background: #c0392b;
        }

        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #999;
        }

        .empty-state p {
            margin-top: 10px;
        }

        .filter-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .filter-btn {
            padding: 8px 15px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .filter-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .clear-completed {
            display: block;
            margin: 20px auto 0;
            padding: 10px 20px;
            background: #eee;
            border: none;
            border-radius: 20px;
            color: #333;
            cursor: pointer;
            transition: background 0.3s;
        }

        .clear-completed:hover {
            background: #ddd;
        }
    </style>
</head>
<body>
<div class="todo-container">
    <div class="todo-header">
        <h1>任务清单</h1>
        <p>记录并管理您的日常任务</p>
    </div>

    <form class="todo-form" id="todoForm">
        <input
                type="text"
                class="todo-input"
                id="todoInput"
                placeholder="添加新任务..."
                autocomplete="off"
                required
        >
        <button type="submit" class="add-btn">添加</button>
    </form>

    <div class="todo-stats" id="todoStats">
        <span>总计: <span id="totalCount">0</span></span>
        <span>已完成: <span id="completedCount">0</span></span>
        <span>待完成: <span id="pendingCount">0</span></span>
    </div>

    <ul class="todo-list" id="todoList">
        <!-- 任务项将通过JavaScript动态添加 -->
    </ul>

    <div class="filter-buttons">
        <button class="filter-btn active" data-filter="all">全部</button>
        <button class="filter-btn" data-filter="active">待完成</button>
        <button class="filter-btn" data-filter="completed">已完成</button>
    </div>

    <button class="clear-completed" id="clearCompleted">清除已完成</button>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取DOM元素
        const todoForm = document.getElementById('todoForm');
        const todoInput = document.getElementById('todoInput');
        const todoList = document.getElementById('todoList');
        const todoStats = document.getElementById('todoStats');
        const totalCount = document.getElementById('totalCount');
        const completedCount = document.getElementById('completedCount');
        const pendingCount = document.getElementById('pendingCount');
        const filterButtons = document.querySelectorAll('.filter-btn');
        const clearCompletedBtn = document.getElementById('clearCompleted');

        // 状态变量
        let todos = JSON.parse(localStorage.getItem('todos')) || [];
        let currentFilter = 'all';

        // 初始化应用
        function init() {
            renderTodos();
            updateStats();
            setupEventListeners();
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 添加任务
            todoForm.addEventListener('submit', function(e) {
                e.preventDefault();
                addTodo();
            });

            // 过滤按钮
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 更新活动状态
                    filterButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');

                    // 设置当前过滤器并重新渲染
                    currentFilter = this.dataset.filter;
                    renderTodos();
                });
            });

            // 清除已完成任务
            clearCompletedBtn.addEventListener('click', clearCompletedTodos);
        }

        // 添加新任务
        function addTodo() {
            const text = todoInput.value.trim();
            if (text) {
                const newTodo = {
                    id: Date.now(),
                    text: text,
                    completed: false,
                    createdAt: new Date()
                };

                todos.unshift(newTodo);
                saveTodos();
                renderTodos();
                updateStats();
                todoInput.value = '';
                todoInput.focus();
            }
        }

        // 切换任务完成状态
        function toggleTodo(id) {
            todos = todos.map(todo =>
                todo.id === id ? {...todo, completed: !todo.completed} : todo
            );
            saveTodos();
            renderTodos();
            updateStats();
        }

        // 删除任务
        function deleteTodo(id) {
            todos = todos.filter(todo => todo.id !== id);
            saveTodos();
            renderTodos();
            updateStats();
        }

        // 清除已完成任务
        function clearCompletedTodos() {
            todos = todos.filter(todo => !todo.completed);
            saveTodos();
            renderTodos();
            updateStats();
        }

        // 保存任务到本地存储
        function saveTodos() {
            localStorage.setItem('todos', JSON.stringify(todos));
        }

        // 根据当前过滤器过滤任务
        function getFilteredTodos() {
            switch(currentFilter) {
                case 'active':
                    return todos.filter(todo => !todo.completed);
                case 'completed':
                    return todos.filter(todo => todo.completed);
                default:
                    return todos;
            }
        }

        // 渲染任务列表
        function renderTodos() {
            const filteredTodos = getFilteredTodos();

            if (filteredTodos.length === 0) {
                todoList.innerHTML = `
                        <div class="empty-state">
                            <h3>暂无任务</h3>
                            <p>${currentFilter === 'completed' ? '您还没有完成任何任务' :
                    currentFilter === 'active' ? '所有任务都已完成！' : '添加您的第一个任务吧'}</p>
                        </div>
                    `;
                return;
            }

            todoList.innerHTML = filteredTodos.map(todo => `
                    <li class="todo-item ${todo.completed ? 'completed' : ''}" data-id="${todo.id}">
                        <input
                            type="checkbox"
                            class="todo-checkbox"
                            ${todo.completed ? 'checked' : ''}
                        >
                        <span class="todo-text">${todo.text}</span>
                        <button class="delete-btn">删除</button>
                    </li>
                `).join('');

            // 为新添加的元素设置事件监听器
            todoList.querySelectorAll('.todo-item').forEach(item => {
                const id = parseInt(item.dataset.id);
                const checkbox = item.querySelector('.todo-checkbox');
                const deleteBtn = item.querySelector('.delete-btn');

                checkbox.addEventListener('change', () => toggleTodo(id));
                deleteBtn.addEventListener('click', () => deleteTodo(id));
            });
        }

        // 更新统计信息
        function updateStats() {
            const total = todos.length;
            const completed = todos.filter(todo => todo.completed).length;
            const pending = total - completed;

            totalCount.textContent = total;
            completedCount.textContent = completed;
            pendingCount.textContent = pending;
        }

        // 初始化应用
        init();
    });
</script>
</body>
</html>